<html>
	<head>
		<title>Javascript Lib(ExtJS, jQuery, Closure...) Samples</title>

		<style type="text/css">
#all-demos {
	
}

#all-demos dd {
	float: left;
	width: 300px;
	height: 100px;
	margin: 5px 5px 5px 10px;
	cursor: pointer;
	zoom: 1;
}

#all-demos dd img {
	width: 120px;
	height: 90px;
	margin: 5px 0 0 5px;
	float: left;
}

#all-demos dd div {
	float: left;
	width: 160px;
	margin-left: 10px;
}

#all-demos dd h4 {
	font-family: tahoma, arial, san-serif;
	color: #555;
	font-size: 11px;
	font-weight: bold;
}

#all-demos dd p {
	color: #777;
}

#all-demos dd.over {
	background: #F5FDE3 url(shared/extjs/images/sample-over.gif) no-repeat;
}

#loading-mask {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 20000;
	background-color: white;
}

#loading {
	position: absolute;
	left: 45%;
	top: 40%;
	padding: 2px;
	z-index: 20001;
	height: auto;
}

#loading a {
	color: #225588;
}

#loading .loading-indicator {
	background: white;
	color: #444;
	font: bold 13px tahoma, arial, helvetica;
	padding: 10px;
	margin: 0;
	height: auto;
}

#loading-msg {
	font: normal 10px arial, tahoma, sans-serif;
}

#all-demos .x-panel-body {
	background-color: #fff;
	border: 1px solid;
	border-color: #fafafa #fafafa #fafafa #fafafa;
}

#sample-ct {
	border: 1px solid;
	border-color: #dadada #ebebeb #ebebeb #dadada;
	padding: 2px;
}

#all-demos h2 {
	border-bottom: 2px solid #99bbe8;
	cursor: pointer;
	padding-top: 6px;
}

#all-demos h2 div {
	background: transparent
		url(../script/extjs/resources/images/default/grid/group-expand-sprite.gif)
		no-repeat 3px -47px;
	padding: 4px 4px 4px 17px;
	color: #3764a0;
	font: bold 11px tahoma, arial, helvetica, sans-serif;
}

#all-demos .collapsed h2 div {
	background-position: 3px 3px;
}

#all-demos .collapsed dl {
	display: none;
}

.x-window {
	text-align: left;
}

#all-demos dd h4 span.new-sample {
	color: red;
}

#all-demos dd h4 span.updated-sample {
	color: blue;
}
</style>
	</head>
	<body>
		<div id="loading-mask" style=""></div>
		<div id="loading">
			<div class="loading-indicator">
				<img src="shared/extjs/images/extanim32.gif" width="32" height="32" style="margin-right: 8px; float: left; vertical-align: top;" />
				<span id="loading-msg">Loading styles and images...</span>
			</div>
		</div>

		<div id="viewport">

			<div id="hd">
				<h1>
					<a href="http://extjs.com/" title="Home"><span>Ext</span> </a>
				</h1>

				<table cellspacing="0" class="nav main-nav">
					<tr>
						<td>
							<a id="home-link" href="http://extjs.com/"><span>Home</span> </a>
						</td>
						<td class="active">
							<a id="products-link" href="http://extjs.com/products"><span>Products</span> </a>
						</td>
						<td>
							<a id="support-link" href="http://extjs.com/support"><span>Support</span> </a>
						</td>
						<td>
							<a id="jobs-link" href="http://jobs.extjs.com"><span>Jobs</span> </a>
						</td>
						<td>
							<a id="company-link" href="http://extjs.com/company"><span>Company</span> </a>
						</td>
						<td>
							<a id="blog-link" href="http://extjs.com/blog"><span>Blog</span> </a>
						</td>
						<td>
							<a id="store-link" href="http://extjs.com/store"><span>Store</span> </a>
						</td>
					</tr>
				</table>
			</div>

			<div id="bd">
				<div class="left-column">
					<h3>
						Javascript Lib(ExtJS, jQuery, Closure...) Samples
					</h3>
					<br />
					<div id="sample-spacer" style="height: 800px;"></div>

					<link rel="stylesheet" type="text/css" href="../script/extjs/resources/css/ext-all.css" />
					<!--link rel="stylesheet" type="text/css" href="../script/extjs/resources/style/xtheme-gray.css" /-->
					<link rel="stylesheet" type="text/css" href="shared/extjs/css/extjs.css" />

					<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
					<script type="text/javascript" src="../script/extjs/adapter/ext/ext-base.js"></script>
					<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
					<script type="text/javascript" src="../script/extjs//ext-all.js"></script>
					<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>

					<!-- App.js contains Ext.App, a simple, re-usable Application component -->
					<script type="text/javascript" src="shared/extjs/App.js"></script>
					<script type="text/javascript" src="shared/extjs/site.js"></script>
					<script type="text/javascript" src="data.js"></script>
					<script type="text/javascript" src="init.js"></script>

					<div id="all-demos">
					</div>

				</div>

				<div class="right-column" style="padding-top: 45px;">

					<div class="side-box">
						<div class="side-box-inner">
							<ul id="sample-menu" class="features"></ul>
						</div>
					</div>
				</div>

				<div style="clear: both"></div>
			</div>
			<!-- end bd -->

			<div id="ft">
				<table cellspacing="0" class="nav">
					<tr>
						<td>
							<a id="home-foot-link" href="http://extjs.com/">Home</a>
						</td>
						<td class="active">
							<a id="products-foot-link" href="http://extjs.com/products">Products</a>
						</td>
						<td>
							<a id="support-foot-link" href="http://extjs.com/support">Support</a>
						</td>
						<td>
							<a id="jobs-foot-link" href="http://jobs.extjs.com">Jobs</a>
						</td>
						<td>
							<a id="company-foot-link" href="http://extjs.com/company">Company</a>
						</td>
						<td>
							<a id="blog-foot-link" href="http://extjs.com/blog">Blog</a>
						</td>
						<td>
							<a id="store-foot-link" href="http://extjs.com/store">Store</a>
						</td>
					</tr>

				</table>
				<div class="copy">
					&copy; 2006-2009 Ext, LLC
				</div>
			</div>

		</div>
		<!-- end viewport -->

		<div class="flyout-menu" id="products-menu" style="display: none;">
			<div style="width: 200px;">
				<h3>
					<a href="http://extjs.com/products/extjs">Ext JS</a>
				</h3>
				<p>
					Cross-browser JavaScript library for building rich internet applications
				</p>

				<ul>
					<li>
						<a href="http://extjs.com/products/extjs">Overview</a>
					</li>
					<li>
						<a href="http://extjs.com/products/extjs/download.php">Download</a>
					</li>
					<li>
						<a href="http://extjs.com/deploy/dev/examples/samples.html">Samples &amp; Demos</a>
					</li>
					<li>
						<a href="http://extjs.com/deploy/dev/docs/">API Documentation</a>
					</li>
					<li>
						<a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a>
					</li>

					<li>
						<a href="http://extjs.com/store/extjs/">Purchase</a>
					</li>
				</ul>
				<br />
				<h3>
					<a href="http://extjs.com/products/gxt">Ext GWT</a>
				</h3>
				<p>
					Java library for building rich internet applications with GWT
				</p>
				<ul>
					<li>
						<a href="http://extjs.com/products/gxt">Overview</a>
					</li>

					<li>
						<a href="http://extjs.com/products/gxt/download.php">Download</a>
					</li>
					<li>
						<a href="http://extjs.com/explorer/" target="_blank">Samples &amp; Demos</a>
					</li>
					<li>
						<a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a>
					</li>
					<li>
						<a href="http://extjs.com/store/gxt/">Purchase</a>
					</li>
				</ul>
				<br />
				<h3>
					<a href="/products/extcore">Ext Core</a>
				</h3>
				<p>
					Cross-browser JavaScript library for enhancing web pages
				</p>
				<ul>
					<li>
						<a href="http://extjs.com/products/extcore">Overview</a>
					</li>
					<li>
						<a href="http://extjs.com/products/extcore/download.php">Download</a>
					</li>
					<li>
						<a href="http://extjs.com/products/extcore/manual/">Manual</a>
					</li>
					<li>
						<a href="http://extjs.com/products/extcore/docs/">API Documentation</a>
					</li>
				</ul>
			</div>
		</div>

		<div class="flyout-menu" id="support-menu" style="display: none;">
			<div style="width: 200px;">

				<h3>
					<a href="http://extjs.com/support">Support Subscriptions</a>
				</h3>
				<p>
					With 1-on-1 email and phone support, we solve your Ext JS, GWT, CSS and JavaScript issues
				</p>
				<ul>
					<li>
						<a href="http://extjs.com/store/extjs/#support-table">Ext JS Subscriptions</a>
					</li>
					<li>
						<a href="http://extjs.com/store/gxt/#support-table">Ext GWT Subscriptions</a>
					</li>
				</ul>
				<br />

				<h3>
					<a href="http://extjs.com/support/training">Training</a>
				</h3>
				<p>
					Get up to speed quickly with on-site training provided by Ext
				</p>
				<ul>
					<li>
						<a href="http://extjs.com/support/training/extjs/">Ext JS Training</a>
					</li>
					<li>
						<a href="http://extjs.com/support/training/gxt/">Ext GWT Training</a>
					</li>
				</ul>
				<br />

				<h3>
					<a href="http://extjs.com/forum">Community</a>
				</h3>
				<p>
					The Ext community forums and wiki
				</p>
				<ul>
					<li>
						<a href="http://extjs.com/forum">Forums</a>
					</li>
					<li>
						<a href="http://extjs.com/learn">Learning Center</a>
					</li>

				</ul>
				<br />
				<h3>
					<a href="http://extjs.com/forum">Ext Solutions</a>
				</h3>
				<p>
					Enterprise consulting and custom development
				</p>
				<ul>
					<li>
						<a href="http://extjs.com/support/services/">Find out more &raquo;</a>
					</li>
				</ul>
			</div>

		</div>


		<div class="flyout-menu" id="store-menu" style="display: none;">
			<div style="width: 200px;">
				<h3>
					<a href="http://extjs.com/store/extjs/">Ext JS</a>
				</h3>
				<ul>
					<li>
						<a href="http://extjs.com/store/extjs/">Licenses</a>
					</li>
					<li>
						<a href="http://extjs.com/store/extjs/#support-table">Support Subscriptions</a>
					</li>

				</ul>
				<br />
				<h3>
					<a href="http://extjs.com/store/gxt/">Ext GWT</a>
				</h3>
				<ul>
					<li>
						<a href="http://extjs.com/store/gxt/">Licenses</a>
					</li>
					<li>
						<a href="http://extjs.com/store/gxt/#support-table">Support Subscriptions</a>
					</li>
				</ul>

				<br />
				<h3>
					<a href="http://extjs.com/store/faq.php">Help</a>
				</h3>
				<ul>
					<li>
						<a href="http://extjs.com/store/faq.php">Ordering FAQ</a>
					</li>
				</ul>
			</div>
		</div>

	</body>
</html>